<template>
	<view class="main">
		<u-sticky style="margin-top:15rpx;">
			<u-tabs
			:list="tabs" 
			:current="current"
			:activeStyle="{color:'#000',fontSize:'30rpx',fontWeight:'600'}"
			:inactiveStyle="{color:'#C1C1C1'}"
			style="background:#FFF;"
			lineWidth='30'
			lineColor="#000"
			:itemStyle="{width:'calc(33% - 40rpx)',height:'40px',whiteSpace:'nowrap'}"
			@change="changeTab"></u-tabs>
		</u-sticky>
		<view class="list">
			<view class="item fadeInUp" v-for="(item,i) in list" :key='i' @click="topage(item)">
				<view class="left">
					<view class="title">
						{{item.title}}
					</view>
					<view class="num">
						{{item.create_time}}
					</view>
				</view>
				<view class="right">
					<view class="title">
						{{item.turnover}}
					</view>
					<view class="num">
						余额 {{item.money_proof}}
					</view>
				</view>
			</view>
		<block v-if="list.length<1">
			<Empty text="暂无数据" :type='0'></Empty>
		</block>
		</view>
		
	</view>
</template>

<script>
		import Empty from '@/components/Empty.vue'
	export default {
			components: {Empty},
		data() {
			return {
				current:0,
				tabs:[{name:"全部明细"},{name:"收入明细"},{name:"支出明细"}],
				page:1,
				size:10,
				totalList:[],
				list:[],
				total:0,
			}
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh(){
			this.page=1
			this.getList()
		},
		onReachBottom(){
			if(this.list.length<this.total){
				this.getList()
			}			
		},
		methods: {
			topage(e){
				uni.setStorage({
					key:'sinfo',
					data:e,
					success:()=> {
						uni.navigateTo({
							url:'/pages/wallet/info'
						})
					}
				})
				
			},
			changeTab(e){
				this.page=1;
				this.current = e.index;
				this.getList();
			},
			async getList(){
				let data = await this.$http({
					url:this.$api.billList,
					method: 'get',
					hideLoading: true,
					data:{
						page:this.page,
						page_size:this.size,
						bill_type_id:0,
						bill_type_pid:this.current
					}
				})
				console.log("****"+JSON.stringify(data)+"****"+this.current)
				if(data.code==200){
					if(this.page==1){
						this.list = []
					}
					let list = data.data.list
					this.total=list.total
					if(this.list.length<list.total){
						this.list = this.list.concat(list.data)
						this.page +=1
					}		
				}else{
					return []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.main{
	.list{
			 padding: 32rpx 32rpx;
			 .item{
				
				 display: flex;
				 align-items: center;
				justify-content: space-between;
				padding-bottom: 28rpx;
				margin-bottom: 28rpx;
				background: #F8F7FC;
				// border-bottom: 1rpx solid #f5f5f5;
					.left{
						margin-top: 25rpx;
						margin-left: 24rpx;
					 display: flex;
					 flex-direction: column;
					 justify-content: flex-start;
					 }
					 .right{
						 margin-top: 20rpx;
						 margin-right: 24rpx;
						 display: flex;
						 flex-direction: column;
						 justify-content: flex-end;
						 align-items: flex-end;
					 }
					 .title{
						 
						 font-size: 28rpx;
						 font-family: PingFangSC-Regular, PingFang SC;
						 font-weight: 400;
						 color: #16172F;
					 }
					 .num{
						 margin-top: 12rpx;
						 font-size: 28rpx;
						 font-family: PingFangSC-Regular, PingFang SC;
						 font-weight: 400;
						 color: #8C93AA;
					 }
				 
			 }
	}
}
</style>
